import styles from "./index.module.less";
import { Mask } from "antd-mobile";
import { useEffect, useRef, useState } from "react";
import { ArticlePopup } from "@/components/article-popup/index.jsx";
import { insureAgreementList } from "@/contstants.js";
export const Tips = () => {
  const articlePopupRef = useRef();
  const [visibleMask, setVisibleMask] = useState(true);
  const [countdown, setCountdown] = useState(5);

  const closeTips = () => {
    setVisibleMask(false);
  };

  useEffect(() => {
    let timer = setInterval(() => {
      setCountdown((c) => {
        if (c > 0) {
          return c - 1;
        } else {
          closeTips();
          clearInterval(timer);
        }
      });
    }, 1000);
    return () => {
      clearInterval(timer);
    };
  }, []);

  return (
    <Mask className={styles.tips} visible={visibleMask} opacity={0.7}>
      <div className={"title"}>
        <i></i>
        已成功获得保额，请留意短信
      </div>
      <div className={"main"}>
        <div className={"name"}>300万医疗保障</div>
        <div className={"desc"}>
          您已进入投保流程，请仔细阅读保险条款、投保须知等内容,为了保障您的权益，您的投保操作将会被记录。查看
          <span onClick={() => articlePopupRef.current.open()}>
            《客户告知书》
          </span>
        </div>
        <div className={"button"} onClick={closeTips}>
          {" "}
          确认 <span>({countdown}秒后关闭)</span>
        </div>
      </div>
      <div className={"close"} onClick={closeTips}></div>
      <ArticlePopup ref={articlePopupRef} article={insureAgreementList[8]} />
    </Mask>
  );
};
